<template>
	<view>
		<view class="new">
			<!-- <wanl-banner interval='5000' :banner="banner" img="media" link="url" height="1087rpx"
				:StyleSheet="StyleSheet" @onchange="onchange" borderRadius='0' :indicatorDots='false' /> -->
			<view class="headtop">
				<image src="/static/images/pointbg.png" mode="widthFix"></image>
				<view class="info" :style="{top:$wanlshop.wanlsys().height + 'px'}">
					<text class="title">当前积分</text>
					<text class="money">{{user.money.money2}}</text>
					<view class="button">
						<text @tap="$wanlshop.auth('/pages/user/signin/log')">积分明细</text>
						<text @tap="$wanlshop.to('/pages/article/details?id=9&title=积分规则&type=singlepage')">积分规则</text>
					</view>
				</view>
				
				
				<view class="cu-custom">
					<view class="cu-bar fixed" :style="{
						height: $wanlshop.wanlsys().height + 'px', 
						paddingTop: $wanlshop.wanlsys().top + 'px',
						color: '#333333',
						// background: headerOpacity > 0?'url('+ backgroundImg+ ')':'none'
					}">
						<view class="action white" @tap="$wanlshop.back(1)">
							<text class="wlIcon-fanhui1"></text>
						</view>
						<view class="content text-bold white" :style="{top: $wanlshop.wanlsys().top + 'px'}">
							积分商城
						</view>
					</view>
				</view>
			</view>
			<view class="listBox">
				<image src="/static/shop/top.png" class="listBoxImg"></image>
				<view class="tab">

					<u-tabs :list="listTab" :is-scroll="true" :current="current" @change="change"
						inactive-color="#9B7726" active-color="#9B2E09"></u-tabs>
				</view>
				<view class="listBoxCenter">
					<view class="list">
						<!-- <view class="listTitle">
						</view> -->
						<view class="listItem" v-for="(item,index) in list" :key="index" @click="jump(item.id)">
							<view class="listItemFlex">
								<image :src="$wanlshop.oss(item.image)" mode="aspectFill" class="listItemFlexImg"></image>
								<view class="listItemFlexRight">
									<view class="listItemFlexTitle">{{item.title}}</view>
									<view class="listItemFlexBtm">
										<view class="listItemFlexBtmText">￥{{ item.price }}</view>
										<!-- <view class="listItemFlexBtmBtn">立即抢购</view> -->
										<image src="/static/shop/go.png" class="listItemFlexBtmBtn"></image>
									</view>
								</view>
							</view>
						</view>
						<block v-if="list.length === 0 && status !== 'loading'">
							<wanl-empty :text="empty" />
						</block>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				banner: [],
				StyleSheet: {
					margin: 0
				},
				current: 0,
				backgroundImg: '',
				headerOpacity: 0,
				list: [],
				listTab: [{
					name: "全部",
					id:''
				}],
				current: 0,
				params: {
					page: 1,
					category_id: ''
				},
				empty: '暂无新品',
				reload: true, //判断是否上拉
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad() {
			this.loadBanner()
			this.categoryData()
			this.loadData()

		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		onPageScroll(e) {
			let tmpY = 50;
			e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		methods: {
			change(index) {
				this.current = index;
				this.params.category_id = this.listTab[index].id
				this.params.page = 1
				this.list = []
				this.loadData()
			},
			jump(id) {
				this.$wanlshop.to(`/pages/product/goods?id=${id}`);
			},
			//异步加载商品列表
			async loadBanner() {
				await uni.request({
					url: '/publics/advert/content',
					data: {
						position: 'integral_banner'
					},
					method: 'POST',
					success: res => {
						console.log("banner", res)
						this.banner = res.data
						this.backgroundImg = this.$wanlshop.oss(res.data[0].media)
						console.log(this.backgroundImg)
					}
				});

			},
			async categoryData() {
				await uni.request({
					url: '/wanlshop/category/index',
					data: {
						type: "shops"
					},
					success: res => {
						console.log("categoryData", res)
						this.listTab = this.listTab.concat(res.data)
						console.log("categoryData", this.listTab)
					}
				});
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/product/point',
					data: this.params,
					method: 'POST',
					success: res => {
						console.log("czxczcz", res)
						this.status = 'more';
						this.list = this.reload ? res.data.data : this.list.concat(res.data
							.data); //数据 追加
						if (res.data.data.length == 0) {
							this.empty = `暂无新品`;
						}
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						console.log("this.list", this.list)
					}
				});

			},
			onchange(e) {
				console.log(e)
				this.current = e.detail.current
				console.log(this.banner[this.current].media)
				this.backgroundImg = this.$wanlshop.oss(this.banner[e.detail.current].media)
				console.log(this.backgroundImg)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.cu-bar {
		background: transparent;
		background-size: 100% !important;
		background-repeat: no-repeat !important;
	}

	/deep/ .u-tabs {
		background: none !important;
	}

	.new {
		.headtop {
			position: relative;
			> .info {
				position: absolute;
				z-index: 99999;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #fff;
				.title {
					font-size: 28rpx;
					margin: 20rpx 0 30rpx 0;
				}
				.money {
					font-size: 50rpx;
				}
				.button {
					margin-top: 40rpx;
					text {
						display: inline-block;
						border: 1px solid #fff;
						border-radius: 50rpx;
						padding: 10rpx 30rpx;
						&:nth-child(1) {
							margin-right: 50rpx;
						}
						&:nth-child(2) {
							margin-left: 50rpx;
						}
					}
				}
			}
			image {
				width: 100%;
			}
		}
		.listBox {
			width: 100%;
			height: auto;
			position: sticky;
			z-index: 10;
			// margin-top: -100rpx;
			padding-bottom: 40rpx;

			.tab {
				width: 635rpx;
				position: absolute;
				top: 0;
				z-index: 10;
				left: 55rpx;
			}

			.listBoxImg {
				width: 690rpx;
				height: 107rpx;
				margin: 0 auto;
				display: block;
			}

			.listBoxCenter {
				// padding: 0 37rpx ;
				width: 690rpx;
				margin: 0 auto;

				.list {
					width: 100%;
					height: auto;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(243, 161, 3, 0.91);
					padding-bottom: 20rpx;
					border-radius: 13rpx;
					margin-top: -20rpx;
					position: sticky;
					z-index: 10;

					.listTitle {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 40rpx;

						.listTitleHx {
							width: 70rpx;
							height: 1rpx;
							background: #FB6451;
						}

						.listTitleText {
							font-size: 36rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FB6451;
							margin: 0 30rpx;
						}
					}



				}

				.listItem {
					padding: 0 40rpx;

					.listItemFlex {
						width: 100%;
						// height: 245rpx;
						padding: 20rpx 0;
						display: flex;
						align-items: center;
						border-bottom: 1rpx solid #dedede;

						.listItemFlexImg {
							width: 171rpx;
							height: 171rpx;
						}

						.listItemFlexRight {
							width: 403rpx;
							height: auto;
							margin-left: auto;

							.listItemFlexTitle {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF8171;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								line-break: anywhere;
							}

							.listItemFlexBtm {
								display: flex;
								align-items: center;
								margin-top: 16rpx;

								.listItemFlexBtmText {
									font-size: 32rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #EB2222;
								}

								.listItemFlexBtmBtn {
									width: 144rpx;
									height: 50rpx;
									margin-left: auto;
								}
							}
						}
					}
				}
			}

		}
	}
</style>